<template>
  <div class="row">
    <div class="col">
      <table class="table">
        <tr>
          <th scope="col" class="header">课程包管理</th>
          <th scope="col" class="header">邀请码链接</th>
          <th scope="col" class="header">剩余数量</th>
          <th scope="col" class="header"></th>
        </tr>
        <tbody>
          <tr v-for="(v,i) in getagentInvite" :key="`myinvitation${i}`">
            <th v-text="v.packegeName" class="word">1</th>
            <td>
              <a :href="href(v.key_ID, v.agent_ID)" class="widths">{{href(v.key_ID, v.agent_ID)}}</a>
            </td>
            <td v-text="v.count"></td>
            <td>
              <button type="button" class="btn btn-sm btn-primary" @click="copys(v)">复制</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <input type="text" id="inputText">
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "myinvitation",
  computed: mapGetters(["getagentInvite"]),
  methods: {
    copys(v) {
      let str = this.href(v.key_ID, v.agent_ID);
      var inputText = document.getElementById("inputText");
      inputText.value = str;
      var currentFocus = document.activeElement;
      inputText.focus();
      inputText.setSelectionRange(0, inputText.value.length);
      document.execCommand("copy", true);
      currentFocus.focus();
      this.$message({
        message: "复制成功",
        type: "success"
      });
    },
    href(kid, uid) {
      return (
        "https://" +
        window.location.host +
        "/register.html?packege_ID=" +
        kid +
        "&agent=" +
        uid
      );
    }
  }
};
</script>

<style scoped>
.header {
  height: 16px;
  font-family: "微软雅黑";
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #565656;
}
table {
  font-size: 12px;
}
.table td,
.table th {
  border-top-color: #ffffff;
}
#inputText {
  position: fixed;
  top: 2000px;
}
</style>

